<template>
  <div class="schoollist">
      <button @click="check()" v-if="w>0">查询</button>
    <button @click="checks()" v-if="w<=0">还原</button>
    <button @click="px()">排序</button>
   <table align="center" class="packcom" border="1" cellpadding="0" cellspacing="0" borderColor="#27619e" width="800">
    <thead>
    <tr class="nr">
      <th>学校</th>
      <th>本科</th>
      <th>硕士</th>
      <th>博士</th>
      <th>专任教师</th>
      <th>备注</th>
      <th v-if="w==0">总人数</th>
    </tr>
   </thead>
   <tbody>
      <tr v-for="(school,index) in school.school" :key="index">
        <td>{{school.school}}</td>
        <td>{{school.UnderGraduate}}</td>
        <td>{{school.Master}}</td>
        <td>{{school.Dr}}</td>
        <td>{{school.Teach}}</td>
        <td>{{school.notes}}</td>
        <td v-if="w==0">{{school.UnderGraduate+school.Master+school.Dr}}</td>
      </tr>
   </tbody>
    </table>
  </div>
</template>

<script>
import school from '../assets/school.js'
export default {
    name:'SchoolList',

    data(){
        return{
            school,
            w:10,
        }
    },
    methods:{
      check(){
         this.w+= -10
      },
      checks(){
        this.w += 10
      },
      px(){
        
      }
    }
}
</script>

<style scoped>
.schoollist{
  width: 100%;
  height: 100%;
}
.schoollist table{
  margin: 0 auto;
  text-align: center;
  margin-top: 10%;
}
button{
  width: 60px;
  height: 30px;
  background: radial-gradient(circle, #ff6b6b, #4ecdc4);
  position: relative;
  margin-top: 2%;
  margin-left:2%
}
</style>